<template>
	<div class="stationRegister">
		<van-nav-bar :title="title" fixed left-arrow @click-left="back" />
		<div class="content">
			<div class="loginBox">
				<div class="list">
					<van-cell-group>
						<van-field v-model="value" clearable :left-icon="user" placeholder="请输入用户名" />
						<van-field v-model="value" clearable type="password" :left-icon="pass" placeholder="请输入密码" />
						<van-field v-model="value" clearable type="password" :left-icon="pass" placeholder="确认密码" />
					</van-cell-group>
					<div class="space">选择注册站点</div>
					<van-cell-group>

						<van-cell title="请选择" is-link arrow-direction="down" value="" @click="show = true" style="color: #999;" />
					</van-cell-group>
					<div class="space">站点类型</div>

					<van-cell-group>
						<van-radio-group v-model="radio" direction="horizontal" checked-color="#fe7600">
							<van-radio name="1">行政站点
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon">
								</template>
							</van-radio>
							<van-radio name="2">基层站点
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
						</van-radio-group>
						<van-field v-model="value" clearable placeholder="站点名称  ︱  2-12位，作为站点名称" />
						<van-field v-model="value" clearable placeholder="请输入11位手机号" />
						<van-field v-model="sms" center clearable placeholder="请输入短信验证码">
							<template #button>
								<van-button size="small" color="#fe7600">发送验证码</van-button>
							</template>
						</van-field>
						<van-checkbox v-model="checked">
							我看过并接受《站长使用和管理协议》
							<template #icon="props">
								<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
							</template>

						</van-checkbox>

					</van-cell-group>
					<div class="button-login opc" @click="toCompleteInfo">下一步</div>
					<div class="toLogin">已有账号，<router-link to="/login">去登录</router-link>
					</div>
				</div>
			</div>


		</div>


		<van-action-sheet v-model="show" close-icon="cross" title="选择注册站点" :style="{ height: '50%' }">
			<div class="inner">
				<van-tabs v-model="active" line-width='35px' color="#FE7600">
					<van-tab :title="item.title" v-for="item in limitData" :key="item.id" :disabled="item.disabled">
						<van-cell :value="index.name" v-for="index in datalist" :key="index.value" @click="getThis(index,item.id)" />
					</van-tab>

				</van-tabs>
			</div>
		</van-action-sheet>

	</div>
</template>

<script>
	import user from "@/assets/img/username.png"
	import pass from "@/assets/img/password.png"
	import tu from "@/assets/img/tu.png"
	import activeIcon from "@/assets/img/checkedstatus.png"
	import inactiveIcon from "@/assets/img/nochoose.png"
	export default {
		name: "stationRegister",
		components: {

		},
		data() {
			return {
				title: "站长注册",
				value: "",
				user: user,
				pass: pass,
				tu: tu,
				radio: '',
				activeIcon: activeIcon,
				inactiveIcon: inactiveIcon,
				sms: '',
				checked: false,
				show: false,
				active: 0,
				list: [{
						title: "选择省",
						id: 1,
						disabled:false

					},
					{
						title: "",
						id: 2,
						disabled:true
					},
					{
						title: "",
						id: 3,
						disabled:true
					},
					{
						title: "",
						id: 4,
						disabled:true

					},
				],
				flag: 4,
				datalist: [{
						name: "四川",
						value: 510000
					},
					{
						name: "四川",
						value: 510001
					},
					{
						name: "四川",
						value: 510002
					},
					{
						name: "四川",
						value: 510003
					},
					{
						name: "四川",
						value: 510004
					},
					{
						name: "四川",
						value: 510005
					},
					{
						name: "四川",
						value: 510006
					},
					{
						name: "四川",
						value: 510007
					},
					{
						name: "四川",
						value: 510008
					},
					{
						name: "四川",
						value: 510009
					},
					{
						name: "四川",
						value: 510010
					}
				]
			}
		},
		computed: {
			limitData: function() {
				return this.list.slice(0, this.flag)
			}

		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			register() {
				this.$router.push({
					path: "/register"
				})
			},
			toCompleteInfo() {
				this.$router.push({
					path: "/complete"
				})
			},
			getThis(item,id){
	
				this.list.forEach(items=>{
					if(id+1 == items.id){
						items.disabled = false
						if(id == 1){
							items.title = "请选择市"
						
						}
						else if(id == 2){
							items.title = "请选择区/县"
							
						}
						else if(id == 3){
							items.title = "请选择街道"
							
						}
						
					}
					if(id == items.id){
						items.title = item.name
					}
				})
				
			}
		}


	}
</script>

<style scoped lang="less">
	.stationRegister {
		padding-top: 46px;
		background: #fff;
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;

		.van-nav-bar {
			.van-icon {
				color: #000;
			}

			.van-nav-bar__text {
				color: #5C5C5C;
			}
		}

		.content {
			padding-top: 1rem;


			.loginBox {
				background: rgba(255, 255, 255, 1);
				border-radius: 0.5rem;
				padding: 1rem 2.16rem;

				.list {
					.van-cell {
						height: 2.75rem;
						border: 1px solid rgba(229, 229, 229, 1);
						border-radius: 2rem;
						margin-bottom: 0.72rem;
						padding-left: 1.63rem;

						input {
							padding-left: 0.7rem;
							background: none;

							&::placeholder {
								font-size: 0.81rem;
								font-family: PingFang SC;
								font-weight: 500;
								color: rgba(204, 204, 204, 1);
							}

							&:focus {
								background-color: none;
							}
						}
					}

					.space {
						font-size: 0.81rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(38, 38, 38, 1);
						line-height: 0.75rem;
						padding: 1rem 1rem;
					}

					.img-icon {
						height: 1.25rem;
					}

					p {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(254, 118, 0, 1);
						line-height: 0.75rem;
						margin-bottom: 0.81rem;
						text-align: right;
					}

					.button-login {
						height: 2.75rem;
						background: rgba(254, 118, 0, 1);
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 2rem;
						margin-top: 2rem;

						&.opc {
							opacity: 0.26;
						}
					}

					.toLogin {
						font-size: 0.88rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: #505050;
						line-height: 0.75rem;
						text-align: center;

						a {
							color: #FE7600;
						}
					}

					.button-register {
						height: 2.75rem;
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						border: 1px solid rgba(254, 118, 0, 1);
						font-weight: 500;
						color: #FE7600;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.huanying {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(122, 122, 122, 1);
						line-height: 0.75rem;
						text-align: center;
						margin-top: 1.22rem;
					}
				}
			}

			.bg {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 10.1rem;
				}
			}
		}

		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			display: none;
		}
	}

	.van-radio-group {
		display: flex;
		margin-bottom: 1rem;
	}

	.van-radio {

		font-size: 0.81rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(66, 66, 66, 1);
		line-height: 0.75rem;
		margin-right: 1.78rem;
	}

	.van-checkbox {
		font-size: 0.81rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(66, 66, 66, 1);
		margin: 0.78rem 0;
	}

	.van-action-sheet__header {
		font-size: 1.06rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(1, 1, 1, 1);
	}

	.inner {
		padding: 1rem 1rem 1rem;
		overflow: hidden;
	}

	.van-tab span {
		font-size: 0.94rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(43, 43, 43, 1);
	}
	.van-tabs__nav{
		justify-content: flex-start;
	}
	.van-tab__pane{
		height: 20rem;
		overflow: auto;
	}
	.van-action-sheet{
		overflow: hidden;
	}
</style>
